<template>
	<view>
		<!-- <view class="big_board" style="color: #fff;text-shadow: 1px 2px 10px #aaa;">
			积分：{{ total }}
		</view> -->

		<view class="cu-timeline" v-for="(item, index) in scoreList" :key="index">
			<view class="cu-time" style="width: 200px;">{{ item.createtime }}</view>
			<view class="cu-item">
				<view class="content">
					<view class="cu-capsule radius">
						<view class="cu-tag " :class="item.score >= 1 ? 'bg-green' : 'bg-red'">类型：{{ tran[item.type] || '其他' }}</view>
						<view class="cu-tag " :class="item.score >= 1 ? 'line-green' : 'line-red'">{{ item.score >= 1 ? '+' +
							item.score :
							item.score }}</view>
					</view>
					<view class="margin-top">{{ item.memo }}
					</view>
				</view>
			</view>
		</view>
		<view v-show="scoreList.length" class="text-center margin-top" @tap="loadMore">
			加载更多
		</view>
	</view>
</template>

<script>
export default {
	onLoad(options) {
		this.getScoreList()
	},
	data() {
		return {
			scoreList: [],//积分列表
			total: -1,
			tran: ['其他', '团队任务', '创新竞赛', '竞速答题', 'pk答题'],
			page: 1,//页码
		};
	},
	methods: {
		loadMore() {
			uni.showToast({
				title: '加载中',
				icon: 'none',
				mask: true
			})
			this.page++
			console.log('%c [ this.page ]-44', 'font-size:13px; background:pink; color:#bf2c9f;', this.page)
			this.getScoreList()
		},
		getScoreList() {
			this.$myHttp.get({
				url: this.$myHttp.urlMap.getScoreList + `?type=&page=${this.page}&limit=6`,
				needLogin: true,
				success: res => {
					if (res.data.data.data.length) {
						this.scoreList = [...this.scoreList, ...res.data.data.data]
						//反转数组
						// this.scoreList.reverse()
						this.total = res.data.data.total
						console.log('%c [ res.data.data.total ]-42', 'font-size:13px; background:pink; color:#bf2c9f;', res.data.data.total)
					} else {
						uni.showToast({
							title: '暂无积分记录',
							icon: 'none',
							mask: true
						})
					}

				}
			})

		}
	},
}
</script>

<style>
page {
	padding-bottom: 20px;
}

.big_board {
	width: 100%;
	height: 200px;
	background-image: linear-gradient(#529AFF 0, #fff 180px, #fff 200px, #f9f9f9 230px, #F1F1F1 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 50px;
	color: #333;
	font-weight: 600;
}
</style>
